<template>
	<view class="page-container">
		<view class="banner">
			<swiper class="swiper" :autoplay="true" :interval="3000" :circular="true">
				<swiper-item class="swiper-item" v-for="(item,index) in imgList" :key="index">
					<image :src=" imagesUrl + item" mode="aspectFill" class="bImg"></image>
				</swiper-item>
			</swiper>
		</view>



		<!-- <view class="address">{{data.address}}</view> -->

		<!-- 房源详细1 -->
		<view v-if="data.type_id == 1" class="house-headline-1">
			<view class="name">{{data.name}}</view>
			<view class="price"><text>{{data.price}}</text></view>

			<view class="message">
				<view class="ul">
					<view class="li">
						<view class="li-name">面积</view>
						<!-- <view>15㎡</view> -->
						<view>{{data.area}}㎡</view>
					</view>
					<view class="li">
						<view class="li-name">户型</view>
						<view>{{data.type}}</view>
					</view>
				</view>

				<view class="ul">
					<view class="li">
						<view class="li-name">公共配套</view>
						<view>{{data.public_mating}}</view>
					</view>
					<view class="li">
						<view class="li-name">电梯</view>
						<view>{{data.elevator}}</view>
					</view>
				</view>

			</view>

			<view class="house-headline-2">
				<view class="headline">家私配套</view>
				<view class="label">
					<view class="li" v-for="(item,index) in facilities">{{item}}</view>
				</view>
			</view>
		</view>

		<!-- 房源详细2 -->
		<view class="headline-box" v-if="data.type_id == 2">
			<view class="house-headline-2">
				<view class="head">
					<view class="name">{{data.name}}</view>
					<view class="rank">项目级别:{{data.xiangmujibie}}</view>
				</view>

				<view class="price">租金：
					<!-- <text>800元</text>/平方 -->
					{{data.price}}
				</view>
				<view class="info">
					<view class="ul">
						<view class="li">物业：
							<!-- <text>200</text>/平方 -->
							{{data.wuye}}
						</view>
						<view class="li">停车费：
							{{data.tingchefei}}
						</view>
					</view>

					<view class="ul">
						<view class="li">支付方式：{{data.zhifufangshi}}</view>
						<view class="li">免租期：{{data.mianzuqi}}</view>
					</view>
					<view class="ul">
						<view class="li">承重：{{data.cengzhong}}</view>
						<view class="li">层高：{{data.cenggao}}</view>
					</view>



					<view class="ul">
						<view class="li">实用率：{{data.shiyonglv}}</view>
						<view class="li">格局：{{data.geju}}</view>
					</view>
				</view>




			</view>

			<view class="house-headline-2">
				<view class="headline">家私配套</view>
				<view class="label">
					<view class="li" v-for="(item,index) in facilities">{{item}}</view>
				</view>
			</view>
		</view>

		<!-- 房源详细3 -->
		<view class="headline-box" v-if="data.type_id == 3">
			<view class="house-headline-2">
				<view class="head">
					<view class="name">{{data.name}}</view>
					<view class="rank"></view>
				</view>

				<view class="price">租金：
					{{data.price}}
				</view>
				<view class="info">
					<view class="ul">
						<view class="li">面积：{{data.area}}㎡</view>
						<view class="li">停车费：{{data.tingchefei}}</view>
					</view>

					<view class="ul">
						<view class="li">支付方式：{{data.zhifufangshi}}</view>
						<view class="li">楼层：{{data.louceng}}</view>
					</view>

					<view class="ul">
						<view class="li">免租期：{{data.mianzuqi}}</view>
						<view class="li">是否分割：{{data.shifoufenge}}</view>
					</view>

					<view class="ul">
						<view class="li">是否可注册：{{data.shifouzhuce}}</view>
						<view class="li">装修状态：{{data.zhuangxiuzhuangtai}}</view>
					</view>
				</view>




			</view>

			<view class="house-headline-2">
				<view class="headline">家私配套</view>
				<view class="label">
					<view class="li" v-for="(item,index) in facilities">{{item}}</view>
				</view>
			</view>
		</view>

		<view class="house-map m20">
			<view class="headline">地址信息</view>
			<view class="map-box">
				<view>{{data.address}}</view>
				<map ref="map" style="width: 100%;height: 300rpx;" :latitude=" data.map_x" :longitude="data.map_y"
					:markers="markers" :scale="scale">
				</map>
			</view>
		</view>

		<view class="house-recommend m20">
			<view class="headline">周边配套</view>
			<view class="ul">
				<view class="flex li" v-for="(item,index) in tradeArea">
					<image class="icon-list" src="@/static/img/list.png"></image><text>{{item}}</text>
				</view>
			</view>
		</view>

		<view class="house-firm m20">
			<view class="headline">参与活动方式</view>
			<view class="ul">
				<view class="flex li">
					<text style="width: 30%;">企业联系电话</text><text>{{business.phone}}</text>
				</view>
				<view class="flex li">
					<text style="width: 30%;">企业官网</text><text>{{business.website}}</text>
				</view>
				<view class="flex li" style="align-items: flex-start;">
					<text style="width: 30%;">企业二维码</text><image style="height: 200rpx;width: 200rpx;margin-left: 10rpx;" @click="previewImage"
						:src="imagesUrl + business.url"></image>
				</view>
			</view>
		</view>
		<view class="menu-top">
			<image src="@/static/img/bt.png" @click="navBacke"></image>
			<image src="@/static/img/sc.png" v-if="!collection" @click="addCollection"></image>
			<image src="@/static/img/sxx.png" v-if="collection" @click="delCollection"></image>
			<!-- <image src="@/static/img/f.png" @click="share"></image> -->
		</view>
		<view class="menu-bottom">
			<view class="left" @click="dial">
				<image src="@/static/img/phone.png"></image>
				<view>电话咨询</view>
			</view>
			<view class="right" @click="navto">
				<view>前往查看</view>
			</view>
		</view>
		
		<view v-if="website != ''">
			<web-view :src="website"></web-view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance,
		defineProps,

	} from 'vue'
	import {
		onLoad,
		onShow,
		onShareAppMessage,
		onShareTimeline
	} from '@dcloudio/uni-app'
	const {
		proxy
	} = getCurrentInstance();

	//
	onLoad((e) => {
		id.value = props.id
		data.value = uni.getStorageSync('house');
		login()
		getHouse()
	})

	onShareAppMessage(() => {
		return {
			title: data.value.name,
			path: '/pages/houseDetails/index?' + data.value.id ,
			imageUrl: imagesUrl + imgList.value[0]
		}
	})
	onShow(() => {

	})
	function  share(){
		 uni.share({
		      title: data.value.name,
		      path: '/pages/houseDetails/index?' + data.value.id ,
		      imageUrl: imagesUrl + imgList.value[0]
		      })
	}
	const imagesUrl = proxy.$imagesUrl; //图片路径

	const props = defineProps({ //获取跳转页面的数据
		id: {
			type: Number,
			required: true
		}
	});
	const userId = ref(null);
	const id = ref(""); //房id
	const data = ref()
	const imgList = ref([]); //图片地址
	const facilities = ref([]); //配套
	const tradeArea = ref([]); //商圈
	const apipost = ref(); //品牌
	const collection = ref(false); //收藏
	const business = ref({
		"name": "", //名称
		"phone": "", //电话
		"website": "", //网址
		"url": "" //二维码图片
	});

	const scale = ref("13"); // 地图默认缩放等级

	const markers = ref([{}]);
	
	const website = ref([]);

	function login() {
		//用户登录获取限时5分钟的code
		uni.login({
			success: (res) => {
				proxy.$request({
					url: `${proxy.$api.getWxUserInfo}` + '?code=' + res.code,
					data: "",
					method: "POST"
				}).then(res => {
					uni.setStorageSync('USERDATA', res.data);
					userId.value = res.data.id
					getCollection()
					if (res.data.user_type == 0) {
						uni.showModal({
							title: '填写资料获取优惠券',
							// content: '填写资料获取优惠券',
							showCancel: false, // 不显示取消按钮
							success: (res) => {
								uni.navigateTo({
									url: "/pages/enroll/index"
								})
							}
						});

					}
				});
			}
		})
	}

	function previewImage() {
		// 调用uni.previewImage方法来实现图片放大
		uni.previewImage({
			urls: [imagesUrl + business.value.url], // 图片路径列表
			current: imagesUrl + business.value.url, // 当前显示图片的链接
		});
	}

	// 拨打电话
	function dial() {
		uni.makePhoneCall({
			phoneNumber: business.value.phone,
			success() {
				console.log('拨打电话成功');
			},
			fail(err) {
				console.log('拨打电话失败', err);
			}
		});
	}
	
	// 跳转官网
	function navto() {
		if(business.value.website != null && business.value.website != ''){
			website.value = "https://" + business.value.website;
		}
	}

	function getHouse() {
		proxy.$request({
			url: `${proxy.$api.getHouseById}` + '?id=' + id.value,
			method: "POST",
		}).then(res => {
			data.value = res.data;
			facilities.value = data.value.facilities != null ? data.value.facilities.split(" ") : []
			tradeArea.value = data.value.trade_area != null ? data.value.trade_area.split(" ") : [],
				imgList.value = data.value.url != null ? data.value.url.split(",") : []
			getBusiness()

			markers.value = [{
				id: 1,
				longitude: data.value.map_y,
				latitude: data.value.map_x,
				name: data.value.name,
				county: data.value.name,
				width: 30, // 宽度属性
				height: 40 // 高度属性
			}]

		})
	}

	function shareToFriend() {
		uni.showShareMenu({
			success() {
				// console.log('显示分享菜单成功');
			},
			fail(error) {
				// console.log('显示分享菜单失败', error);
			}
		});
	}

	function navBacke() {
		uni.navigateBack({
			delta: 1,
			success: function(res) {},
			fail: function() {
				uni.switchTab({
					url: '/pages/index/index' // 指定页面的路径
				});
			}
		})
	}

	function addCollection() { //用户添加收藏
		proxy.$request({
			url: `${proxy.$api.addCollection}` + '?user_id=' + userId.value + '&house_id=' + id.value,
			method: "POST",
		}).then(res => {
			collection.value = true
			getCollection()
		})
	}




	function delCollection() { //用户取消收藏
		proxy.$request({
			url: `${proxy.$api.delCollection}` + '?user_id=' + userId.value + '&house_id=' + id.value,
			method: "POST",
		}).then(res => {
			collection.value = false
			getCollection()
		})
	}

	function getCollection() { //获取用户收藏
		proxy.$request({
			url: `${proxy.$api.getCollection}` + '?user_id=' + userId.value,
			method: "POST",
		}).then(res => {
			collection.value = findItemById(res.data, id.value)
		})
	}

	function getBusiness() { //用户企业信息
		proxy.$request({
			url: `${proxy.$api.getBusiness}`,
			method: "POST",
		}).then(res => {
			for (const item of res.data) {
				if (item.id === data.value.business_id) {
					business.value = item
					return
				}
			}
		})
	}



	function findItemById(items, targetId) {
		for (const item of items) {
			if (item.id === targetId) {
				return true;
			}
		}
		return false;
	}
</script>

<style lang="less" scoped>
	.page-container {
		// background: white;
		// padding-top: ;
		padding-bottom: 120rpx;
	}

	.menu-top {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100rpx;

		image {
			background-color: #BBBBBB;
			border-radius: 50%;
			padding: 10rpx;
			width: 40rpx;
			height: 40rpx;
			margin-top: 20rpx;
			position: absolute;
		}

		image:nth-child(1) {
			left: 30rpx;
		}

		image:nth-child(2) {
			right: 20rpx;
		}

		image:nth-child(3) {
			right: 20rpx;
		}
	}

	.menu-bottom {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 0rpx;
		width: 100%;
		height: 120rpx;
		background-color: #F7F7F7;

		.left {
			width: 40%;

			display: flex;
			align-items: center;

			// justify-content: center;
			image {
				width: 42rpx;
				height: 42rpx;
				margin-left: 50rpx;
			}

			view {
				margin-left: 10rpx;
			}
		}

		.right {
			width: 60%;

			view {
				text-align: center;
				background-color: #EEEEEE;
				width: 380rpx;
				padding: 15rpx;
				border-radius: 30rpx;
			}
		}
	}


	.m20 {
		margin-left: 20px;
		margin-right: 20px;
	}

	.headline {
		font-size: 36rpx
	}

	.banner {
		width: 100%;
		height: 420rpx;
		overflow: hidden;

		.swiper {
			width: 100%;
			height: 100%;

			.swiper-item {
				width: 100%;
				height: 100%;
			}
		}

		.bImg {
			width: 100%;
			height: 100%;
			display: block;
		}
	}

	.address {
		position: relative;
		top: -50rpx;
		left: 100rpx;

	}

	.house-headline-1 {
		margin: 20rpx 0;
		padding: 20rpx;
		background: white;
		border-radius: 16rpx;

		.name {
			font-size: 32rpx;
			margin-bottom: 30rpx;
		}

		.price {
			font-size: 32rpx;
			margin-bottom: 50rpx;

			text {
				font-size: 34rpx;
				color: #FFB260;
			}
		}

		.message {
			width: 100%;
			border-top:1px solid #ccc;

			.ul {
				margin-top: 20rpx;
				margin-bottom: 20rpx;
				display: flex;
				width: 100%;

				.li {
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					display: flex;
					width: 50%;

					.li-name {
						width: 200rpx;
					}
				}
			}
		}



		.label {
			margin-top: 20rpx;
			display: flex;
			flex-wrap: wrap;

			.li {
				border: #BBBBBB 1rpx solid;
				padding: 5rpx 20rpx;
				margin: 10rpx;
			}

		}
	}


	.house-headline-2 {
		margin: 20rpx 0;
		padding: 20rpx;
		background: white;
		border-top: 1px solid #ccc;
		
		.head {
			display: flex;

			.name,
			.rank {
				width: 50%;
			}

			.name {
				font-size: 35rpx;
				line-height: 40rpx;
			}
		}

		.name {
			font-size: 32rpx;
			margin-bottom: 30rpx;
		}

		.info {
			.ul {
				margin-bottom: 20rpx;
				display: flex;
				width: 100%;

				.li {
					font-size: 26rpx;
					white-space: nowrap;
					/* 防止文本换行 */
					overflow: hidden;
					/* 超出部分隐藏 */
					text-overflow: ellipsis;
					/* 超出部分显示省略号 */
					display: flex;
					width: 45%;

					.li-name {
						width: 200rpx;
					}
				}
			}
		}

		.price {
			font-size: 32rpx;
			margin-bottom: 50rpx;

			text {
				font-size: 34rpx;
				color: #FFB260;
			}
		}

		.message {
			width: 100%;

			.ul {
				margin-bottom: 20rpx;
				display: flex;
				width: 100%;

				.li {
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					display: flex;
					width: 50%;

					.li-name {
						width: 200rpx;
					}
				}
			}
		}



		.label {
			margin-top: 20rpx;
			display: flex;
			flex-wrap: wrap;

			.li {
				border: #BBBBBB 1rpx solid;
				padding: 5rpx 20rpx;
				margin: 10rpx;
				border-radius: 5px;;
			}

		}
	}

	.house-message {
		.ul {
			margin-top: 30rpx;

			.li {
				margin-bottom: 30rpx;

				.li-i {
					display: flex;
					align-items: center;
					width: calc(50% - 20rpx);

					view {
						margin-left: 100rpx;
					}
				}

			}
		}
	}

	.house-map {
		margin-top: 20rpx;

		.map-box {
			margin-top: 20rpx;
		}
	}

	.house-recommend {
		margin-top: 80rpx;

		.ul {
			margin-top: 30rpx;
			margin-right: 10rpx;

			.li {

				margin-bottom: 30rpx;

				text {
					margin-left: 10rpx;
				}

				.icon-list {
					width: 30rpx;
					height: 30rpx;
					margin-left: 5rpx;
				}
			}
		}
	}

	.house-firm {
		margin-top: 80rpx;

		.ul {
			margin-top: 30rpx;
			margin-right: 10rpx;

			.li {
				font-size: 28rpx;
				margin-bottom: 30rpx;

				text {
					margin-left: 10rpx;
				}
			}
		}
	}
</style>
